<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="#C5C8FD" height="74">
				<view class="u-nav-slot" slot="left" @click="goBack">
					<image style="height: 63rpx;width: 72rpx; " src="@/static/images/login/fanhui.png" />
				</view>
				<view class="u-nav-slot-center" slot="center">
					<span>设置</span>
				</view>
				<view class="u-nav-slot-right flex-align-center" slot="right">
					<view class="screen-box flex-align-center">
						<image src="../../static/images/common/touping.png"></image>
						<span>投屏</span>
					</view>
					<view class="back-index flex-center">
						<view class="index-bj flex-center">
							<image style="height: 23rpx;width: 30rpx;" src="@/static/images/common/zhuomian.png" />
						</view>
						<span>桌面</span>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="content">
			<view class="">
				<view class="handle-box flex-between">
					<!-- 显示 -->
					<view class="show-box ">
						<view class="show-box-label">
							显示
						</view>
						<view class="show-box-item flex-align-center" style="background: #43C3A0;">
							<image src="../../static/images/common/liangdu.png"></image>
							<view class="" style="margin-left: 24rpx;">
								<view class="">
									亮度
								</view>
								<view class="">
									62%
								</view>
							</view>
						</view>
						<view class="show-box-item flex-align-center" style="margin-top: 30rpx;">
							<image src="../../static/images/common/xiping.png" class="xi-ping"></image>
							<view class="" style="margin-left: 24rpx;">
								<view class="">
									超时息屏
								</view>
								<view class="">
									30分钟
								</view>
							</view>
						</view>
					</view>
					<!--声音  -->
					<view class="sound-box">
						<view class="show-box-label">
							声音
						</view>
						<view class="show-box-item flex-align-center" style="background: #43C3A0;">
							<image class="yin-liang" src="../../static/images/common/yinliang.png"></image>
							<view class="" style="margin-left: 24rpx;">
								<view class="">
									音量
								</view>
								<view class="">
									62%
								</view>
							</view>
						</view>
						<view class="touch-box flex-between">
							<view class="touch-box-item flex-center">
								<span>触摸提示音</span>
								<u-switch v-model="value1" @change="change1"></u-switch>

							</view>
							<view class="touch-box-item flex-center">
								<span>触摸震动</span>
								<u-switch v-model="value2" @change="change2"></u-switch>
							</view>
						</view>
					</view>
					<view class="network-list">
						<view class="network-list-item flex-align-center">
							<image class="yidong" src="../../static/images/common/yidong.png"></image>
							<span>移动网络</span>
						</view>
						<view class="network-list-item flex-align-center wifi-bj">
							<image class="wifi-img" src="../../static/images/common/wuxian.png"></image>
							<span>wifi</span>
						</view>
						<view class="network-list-item flex-align-center lanya-bj">
							<image class="lanya" src="../../static/images/common/lanya.png"></image>
							<span>蓝牙</span>
						</view>
					</view>
					<view class="img-box">
						<view class="img-box-item flex-center">
							<image class="img-manger" src="../../static/images/common/tupian.png"></image>
							<span>图片管理</span>
						</view>
						<view class="img-box-item flex-center">
							<image class="qingchu" src="../../static/images/common/qingchu.png"></image>
							<span>清除缓存</span>
						</view>
					</view>
					<view class="battery-box img-box">
						<view class="battery-box-item flex-align-center">
							<image src="../../static/images/common/dianliang.png" class="dianliang"></image>
							<view style="margin-left: 50rpx;flex-direction: column;" class="flex-between">
								<view style="color: #676767;font-size: 24rpx;">
									剩余电量
								</view>
								<view style="color: #000;font-size: 84rpx;font-weight:600; ">
									14%
								</view>
							</view>
						</view>
						<!-- 录音设置 -->
						<view class="battery-box-item flex-center" style="flex-direction: column;">
							<span style="margin-bottom: 5rpx;font-size: 22rpx;color: #676767;">录音设置</span>
							<view class="flex-between" style="width: 100%;">
								<view class="pattern-item green flex-center">
									安静模式
								</view>
								<view class="pattern-item un-select flex-center">
									降噪模式
								</view>
							</view>
							<span class="tips">安静模式适用在家等独立安静环境使用。 </span>
							<span class="tips">在人多复杂的环境下建议打开降噪模式。</span>
						</view>
					</view>
				</view>
				<view class="update-list flex-between">
					<view class="update-list-item flex-between">
						<view class="flex-align-center">
							<image src="../../static/images/common/gengxin.png" class="image1"></image>
							<view style="margin-left: 26rpx;">
								<view class="">
									软件更新
								</view>
								<view class="">
									v202406190100
								</view>
							</view>
						</view>
					</view>
					<view class="update-list-item flex-between">
						<view class="flex-align-center">
							<image src="../../static/images/common/shengji.png" class="image2"></image>
							<span>升级尝鲜</span>
						</view>
						<image src="../../static/images/common/youjian.png" class="arrow-right"></image>
					</view>
					<view class="update-list-item flex-between">
						<view class="flex-align-center">
							<image src="../../static/images/common/gujianshezhi.png" class="image3"></image>
							<span>固件设置</span>
						</view>
						<image src="../../static/images/common/youjian.png" class="arrow-right"></image>
					</view>
					<view class="update-list-item flex-between">
						<view class="flex-align-center">
							<image src="../../static/images/common/guanyu.png" class="image4"></image>
							<span>关于我们</span>
						</view>
						<image src="../../static/images/common/youjian.png" class="arrow-right"></image>
					</view>
				</view>

			</view>
			<view class="logout flex-center" @click="logout">
				退出登录
			</view>


		</view>
	</view>
</template>

<script>
	import common from '@/utils/wxApplet/common.js'
	import {
		loginLogoutApi
	} from '@/api/index.js'
	export default {
		data() {
			return {
				value1: false,
				value2: false,
			}
		},
		methods: {
			goBack() {
				this.$common.goBack()
			},
			change1(e) {
				console.log('change', e);
			},
			change2(e) {
				console.log('change', e);
			},
			// 退出登录
			async logout() {
				const {
					data: res
				} = await loginLogoutApi({})
				uni.$u.toast(res.msg);
				if (res.code === 1) {
					common.logout();
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 500)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: #fff;
		display: flex;
		flex-direction: column;
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #2A61FC;
		font-size: px_2_vw(48);

	}

	.u-nav-slot-right {
		.screen-box {
			color: #8C9CF1;

			image {
				width: px_2_vw(34);
				height: px_2_vw(31);
				margin-right: 8rpx;
			}
		}

		.back-index {
			margin-left: 44rpx;

			.index-bj {
				width: px_2_vw(38);
				height: px_2_vw(38);
				border-radius: 50%;
				background: #fff;
				margin-right: 9rpx;
			}

			width: px_2_vw(132);
			height: px_2_vw(51);
			font-size: px_2_vw(26);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			background-color: #8D9DF1;
			border-radius: 59px;
		}
	}

	.content {
		flex: 1;
		padding: 100rpx 30rpx 56rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.handle-box {


			.show-box {
				width: px_2_vw(346);
				height: px_2_vw(466);
				// margin-right: 51rpx;
				background: radial-gradient(100% 100% at 50% 50%, #E5DDEA 0%, #BDC2E8 100%);
				border-radius: 15rpx;
				padding: 35rpx 0 33rpx 0;




			}

			.show-box-label {
				text-align: center;
				margin-bottom: 60rpx;
				font-size: px_2_vw(24);
			}

			.show-box-item {
				width: px_2_vw(319);
				height: px_2_vw(142);
				background: #C6CCE7;
				border-radius: 15rpx;
				margin: 0 auto;
				color: #fff;
				// padding: 0 12rpx;
				font-size: px_2_vw(24);
				color: #fff;

				.xi-ping {
					width: px_2_vw(80);
					height: px_2_vw(74);
				}

				.yin-liang {
					width: px_2_vw(81);
					height: px_2_vw(68);
				}

				image {
					width: px_2_vw(97);
					height: px_2_vw(92);
					margin-left: 19rpx;
				}
			}

			// 触摸
			.touch-box {
				margin-top: 33rpx;

				.touch-box-item {
					width: px_2_vw(154);
					height: px_2_vw(142);
					background: #C6CCE7;
					border-radius: 15rpx;
					font-size: px_2_vw(24);
					flex-direction: column;

					span {
						margin: 10rpx 0 20rpx 0;
					}
				}
			}


			.sound-box {
				width: px_2_vw(346);
				height: px_2_vw(466);
				background: radial-gradient(100% 100% at 50% 50%, #E5DDEA 0%, #BDC2E8 100%);
				border-radius: 15rpx;
				padding: 35rpx 12rpx 33rpx 12rpx;
			}

			.network-list {
				height: px_2_vw(466);
				// margin: 0 24rpx 0 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.network-list-item {
					width: px_2_vw(346);
					height: px_2_vw(117);
					background: #43C3A0;
					border-radius: 15rpx;
					padding: 0 40rpx;

					span {
						margin-left: 23rpx;
						color: #fff;
					}

					.yidong {
						width: px_2_vw(63);
						height: px_2_vw(71);
					}

					.xi-ping {
						width: px_2_vw(80);
						height: px_2_vw(74);
					}

					.yin-liang {
						width: px_2_vw(81);
						height: px_2_vw(68);
					}

					.lanya {
						width: px_2_vw(68);
						height: px_2_vw(84);
					}

					.wifi-img {
						width: px_2_vw(83);
						height: px_2_vw(60);
					}
				}

				.wifi-bj {
					background: radial-gradient(100% 100% at 50% 50%, #015EEA 0%, #00C0FA 100%);
				}

				.lanya-bj {
					background: radial-gradient(100% 100% at 50% 50%, #E5DDEA 0%, #BDC2E8 100%);
				}
			}
		}

		.update-list {
			margin: 40rpx 0;

			.update-list-item {
				width: px_2_vw(425);
				height: px_2_vw(146);
				background: #DCDCDC;
				border-radius: 15rpx;
				color: #000000;
				padding: 0 50rpx;

				span {
					margin-left: 26rpx;
				}

				.arrow-right {
					width: px_2_vw(23);
					height: px_2_vw(37);
				}

				.image1 {
					width: px_2_vw(61);
					height: px_2_vw(42);
				}

				.image2 {
					width: px_2_vw(68);
					height: px_2_vw(51);
				}

				.image3 {
					width: px_2_vw(60);
					height: px_2_vw(60);
				}

				.image4 {
					width: px_2_vw(57);
					height: px_2_vw(57);
				}
			}
		}

		.img-box {
			height: px_2_vw(466);
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.img-box-item {
				width: px_2_vw(207);
				height: px_2_vw(209);
				border-radius: 15rpx;
				background: radial-gradient(100% 100% at 50% 50%, #E5DDEA 0%, #BDC2E8 100%);
				flex-direction: column;

				.img-manger {
					width: px_2_vw(94);
					height: px_2_vw(81);
				}

				.qingchu {
					width: px_2_vw(96);
					height: px_2_vw(99);
				}

				span {
					margin-top: 20rpx;
					font-weight: bold;
					font-size: px_2_vw(28);
				}
			}
		}

		.battery-box {
			// margin-left: 32rpx;

			.battery-box-item {
				width: px_2_vw(422);
				height: px_2_vw(209);
				border-radius: 15rpx;
				background: radial-gradient(100% 100% at 50% 50%, #E5DDEA 0%, #BDC2E8 100%);
				padding: 0 38rpx;

				.dianliang {
					width: px_2_vw(90);
					height: px_2_vw(144);
				}

				.pattern-item {
					width: px_2_vw(154);
					height: px_2_vw(80);
					border-radius: 15rpx;
				}

				.green {
					background: #43C3A0;
					color: #fff;
				}

				.un-select {
					background: #C6CCE7;
				}

				.tips {
					font-size: px_2_vw(18);
					color: #919191;
					margin-top: 10rpx;
				}
			}
		}

		.logout {
			width: 100%;
			height: px_2_vw(83);
			border: 1rpx solid #FF0000;
			border-radius: 15rpx;
			color: #FF0000;
		}
	}

	::deep .u-switch {}
</style>